#WEARS-MAIN {
    height: max-content;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-gap: 10px; /* WebKit-based browsers */
    justify-content: center;
    align-items: center;
}
.Wears-main-heading {
    height: max-content;
    color: white;
    background-color: var(--main-color);
    padding: 20px;
    width: 100%;
    height: 25vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Wears-main-heading-text {
    width: max-content;
    margin-left: -100vh;
    margin-top: 150px;
    padding: 20px;
}
.Wears-main-heading-text p {
    font-size: 70px;
    font-weight: 700;
    font-family: "roboto",sans-serif;
}
.wears-main-main-section {
    display: flex;
    gap: 10px;
    -webkit-gap: 10px; /* WebKit-based browsers */
    flex-direction: column;
    width: max-content;
    padding: 20px;
   
    justify-content: center;
    align-items: center;
}
#Wears-main-section-one {
    padding: 10px;
    height: 60vh;  /* control height here */
    width: 130vh;  /* control width here */
}
#Wears-main-section-two, #Wears-main-section-three {
    height: max-content;
}
#Wears-main-section-one {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Change wears layouts here */
    column-gap: 60px;
    -webkit-column-gap: 60px; /* WebKit-based browsers */
    margin-bottom: 150px;
}
#outfits-sections {
    display: flex;
    overflow: hidden;
    gap: 10px;
    -webkit-gap: 10px; /* WebKit-based browsers */
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 40px;
}
.Wears-main-text-section {
    transform: rotate(90deg);
    position: absolute;
    top: 50;
    left: 0;
    margin-left: -140px;
    z-index: 99;
}
.Wears-main-text-section p {
    opacity: .8;
    text-align: center;
    font-size: 70px;
    width: max-content;
    font-family: "poppins", sans-serif;
    color: white;
    font-weight: 900;
    z-index: 99;
    letter-spacing: 10px;
    color: var(--main-color);
}
.Wears-main-image-section img {
    width: 630px; /* Adjust Wear image size here */
    margin-left: 100px;

}
.Wears-main-image-section {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;  
}
.Wears-main-image-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 50;
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
    z-index: 20;
} 
#outfits-sections:hover img {
    width: 330px; /* Adjust wear image size here on hover */
    margin-left: 40px;
}
#outfits-sections:hover .Wears-main-text-section p {
    transform: translateY(200px);
}
/* #outfits-sections:hover.Wears-main-image-section::before {
    background-color: transparent;
} */
.Wears-main-image-section:hover::before {
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
    display: none;
}


#Single-wears {
   height: max-content;
    width: 130vh;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;  
}
#Single-wears img {
    width: 200px;
}
#Wears-main-section-two{
    display: flex;
    justify-content: center;
    align-items: center;
    width:max-content;
    padding:70px

}

#group-image-wears{
    width: max-content;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;

}
#group-image-wears::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    
    /* background: linear-gradient(rgba(255, 255, 255, .5), rgb(255, 255, 255, .6)); */
    z-index: 20;
    transition: all ease .5s ;

}
/* #group-image-wears:hover::before {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));

} */
.class-two-wear-image {
    width: 130vh; /* Adjust group image size here */
}



/* MEDIA QUERIES  */

/* LARGE DISPLAYS  */
@media screen and (min-width: 2560px) {

    #WEARS-MAIN {
        height: max-content;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        justify-content: center;
        align-items: center;
    }
    .Wears-main-heading {
        height: max-content;
        color: white;
        background-color: var(--main-color);
        padding: 20px;
        width: 100%;
        height: 25vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .Wears-main-heading-text {
        width: max-content;
        margin-left: -30vh;
        margin-top: 150px;
        padding: 20px;
    }
    .Wears-main-heading-text p {
        font-size: 80px;
        font-weight: 700;
        font-family: "roboto",sans-serif;
    }
    .wears-main-main-section {
        display: flex;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        
        flex-direction: column;
        width: max-content;
        padding: 20px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
    }
    #Wears-main-section-one, #Wears-main-section-two, #Wears-main-section-three {
        /* border: 2px solid red; */
        padding: 10px;
        height: 60vh;  /* control height here */
        width: 130vh;  /* control width here */
    }
    #Wears-main-section-one {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Change wears layouts here */
        column-gap: 60px;
        -webkit-column-gap: 60px; /* WebKit-based browsers */
    }
    #outfits-sections {
        display: flex;
        overflow: hidden;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 40px;
    }
    .Wears-main-text-section {
        transform: rotate(90deg);
        position: absolute;
        top: 50;
        left: 0;
        margin-left: -200px;
        z-index: 99;
    }
    .Wears-main-text-section p {
        opacity: .8;
        text-align: center;
        font-size: 90px;
        width: max-content;
        font-family: "poppins", sans-serif;
        color: white;
        font-weight: 900;
        z-index: 99;
        letter-spacing: 10px;
        color: var(--main-color);
    }
    .Wears-main-image-section img {
        width: 1030px; /* Adjust Wear image size here */
        margin-left: 100px;
    
    }
    .Wears-main-image-section {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;  
    }
    .Wears-main-image-section::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 50;
        background: linear-gradient(rgba(255, 255, 255, 0.6), rgb(0, 0, 0));
        z-index: 20;
    } 
    #outfits-sections:hover img {
        width: 600px; /* Adjust wear image size here on hover */
        margin-left: 90px;
        margin-top: 50px;
    }
    #outfits-sections:hover .Wears-main-text-section p {
        transform: translateY(200px);
    }
    /* #outfits-sections:hover.Wears-main-image-section::before {
        background-color: transparent;
    } */
    .Wears-main-image-section:hover::before {
        background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
        display: none;
    }
    
    
    #Wears-main-section-two{
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    
    #group-image-wears{
        width: max-content;
        height: max-content
        ;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    
    }
    #group-image-wears::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 50;
        background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
        z-index: 20;
        transition: all ease .5s ;
    
    }
    #group-image-wears:hover::before {
        background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    
    }
    .class-two-wear-image {
        width: 120vh; /* Adjust group image size here */
    }
    




}
/*......................... LAPTOP DISPLAYS ...............  */
@media screen and (min-width: 930px) and (max-width: 1440px){

    #WEARS-MAIN {
        height: max-content;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        justify-content: center;
        align-items: center;
    }
    .Wears-main-heading {
        height: max-content;
        color: white;
        background-color: var(--main-color);
        padding: 20px;
        width: 100%;
        height: 25vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .Wears-main-heading-text {
        width: max-content;
        margin-left: -50vh;
        margin-top: 150px;
        padding: 20px;
        padding-bottom: 30px;
    }
    .Wears-main-heading-text p {
        font-size: 50px;
        font-weight: 700;
        font-family: "roboto",sans-serif;
    }
    .wears-main-main-section {
        display: flex;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        flex-direction: column;
        width: max-content;
        padding: 20px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
    }
    #Wears-main-section-one, #Wears-main-section-two, #Wears-main-section-three {
        /* border: 2px solid red; */
        padding: 10px;
        height: 60vh;  /* control height here */
        width: 110vh;  /* control width here */
        overflow: hidden;
    }
    #Wears-main-section-one {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Change wears layouts here */
        column-gap: 10px;
        -webkit-column-gap: 10px; /* WebKit-based browsers */
    }
    #outfits-sections {
        display: flex;
        overflow: hidden;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 20px;
    }
    .Wears-main-text-section {
        transform: rotate(90deg);
        position: absolute;
        top: 50;
        left: 0;
        margin-left: -120px;
        z-index: 99;
    }
    .Wears-main-text-section p {
        opacity: .8;
        text-align: center;
        font-size: 50px;
        width: max-content;
        font-family: "poppins", sans-serif;
        color: white;
        font-weight: 900;
        z-index: 99;
        letter-spacing: 10px;
        color: var(--main-color);
    }
    .Wears-main-image-section img {
        width: 500px; /* Adjust Wear image size here */
        margin-left: 100px;
    
    }
    .Wears-main-image-section {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;  
    }
    .Wears-main-image-section::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 50;
        /* background: linear-gradient(rgba(255, 255, 255, 0.6), rgb(0, 0, 0)); */
        z-index: 20;
    } 
    #outfits-sections:hover img {
        width: 270px; /* Adjust wear image size here on hover */
        margin-left: 15px;
    }
    #outfits-sections:hover .Wears-main-text-section p {
        transform: translateY(200px);
    }
    /* #outfits-sections:hover.Wears-main-image-section::before {
        background-color: transparent;
    } */
    .Wears-main-image-section:hover::before {
        background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
        display: none;
    }
    
    
    #Wears-main-section-two{
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    
    #group-image-wears{
        width: max-content;
        height: max-content
        ;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    
    }
    #group-image-wears::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 50;
        background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0, 0));
        z-index: 20;
        transition: all ease .5s ;
    
    }
    #group-image-wears:hover::before {
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    
    }
    .class-two-wear-image {
        width: 110vh; /* Adjust group image size here */
    }
    

}

/* MOBILE PHONES  DISPLAYS  */
@media screen and (min-width: 770px) and (max-width: 929px){

    #WEARS-MAIN {
        height: max-content;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        justify-content: center;
        align-items: center;
    }
    .Wears-main-heading {
        height: max-content;
        color: white;
        background-color: var(--main-color);
        padding: 20px;
        width: 100%;
        height: 20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 50px;
    }
    .Wears-main-heading-text {
        width: max-content;
        margin-left: -10vh;
        margin-top: 150px;
        padding: 20px;
    }
    .Wears-main-heading-text p {
        font-size: 50px;
        font-weight: 700;
        font-family: "roboto",sans-serif;
    }
    .wears-main-main-section {
        display: flex;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        flex-direction: column;
        width: max-content;
        padding: 20px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
    }
    #Wears-main-section-one, #Wears-main-section-two, #Wears-main-section-three {
        /* border: 2px solid red; */
        padding: 10px;
        height: 60vh;  /* control height here */
        width: 85vh;  /* control width here */
        overflow: hidden;
    }
    #Wears-main-section-one {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Change wears layouts here */
        column-gap: 10px;
        -webkit-column-gap: 10px; /* WebKit-based browsers */
    }
    #outfits-sections {
        display: flex;
        overflow: hidden;
        gap: 10px;
        -webkit-gap: 10px; /* WebKit-based browsers */
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 20px;
    }
    .Wears-main-text-section {
        transform: rotate(90deg);
        position: absolute;
        top: 50;
        left: 0;
        margin-left: -100px;
        z-index: 99;
    }
    .Wears-main-text-section p {
        opacity: .8;
        text-align: center;
        font-size: 40px;
        width: max-content;
        font-family: "poppins", sans-serif;
        color: white;
        font-weight: 900;
        z-index: 99;
        letter-spacing: 15px;
        color: var(--main-color);
    }
    .Wears-main-image-section img {
        width: 430px; /* Adjust Wear image size here */
        margin-left: 100px;
    
    }
    .Wears-main-image-section {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;  
    }
    .Wears-main-image-section::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 50;
        /* background: linear-gradient(rgba(255, 255, 255, 0.6), rgb(0, 0, 0)); */
        z-index: 20;
    } 
    #outfits-sections:hover img {
        width: 210px; /* Adjust wear image size here on hover */
        margin-left: 0px;
        margin-top: 60px;
    }
    #outfits-sections:hover .Wears-main-text-section p {
        transform: translateY(200px);
    }
    /* #outfits-sections:hover.Wears-main-image-section::before {
        background-color: transparent;
    } */
    .Wears-main-image-section:hover::before {
        background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255, 0));
        display: none;
    }
    
    
    #Wears-main-section-two{
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    #Wears-main-section-three {
        display: flex;
        justify-content: center;
        align-items: center;

    }
    
    #group-image-wears{
        width: max-content;
        height: max-content
        ;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    
    }
    #group-image-wears::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 50;
        background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255, 0));
        z-index: 20;
        transition: all ease .5s ;
    
    }
    #group-image-wears:hover::before {
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    
    }
    .class-two-wear-image {
        width: 80vh; /* Adjust group image size here */
    }
    

}
/* MOBILE PHONES  DISPLAYS  */
@media screen and (min-width: 320px) and (max-width: 769px)
{

    #WEARS-MAIN {
        height: max-content;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .Wears-main-heading {
        height: max-content;
        color: white;
        background-color: var(--main-color);
        padding: 20px;
        width: 100%;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 50px;
    }
    .Wears-main-heading-text {
        width: max-content;
        margin-left: 0px;
        margin-top: 100px;
        padding: 20px;
    }
    .Wears-main-heading-text p {
        font-size: 30px;
        font-weight: 700;
        font-family: "roboto",sans-serif;
    }
    .wears-main-main-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0px;
        margin-top: 50px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
       
    }
    #Wears-main-section-one, #Wears-main-section-two, #Wears-main-section-three {
        /* border: 2px solid red; */
        padding: 0px;
        overflow: visible;
        width: 100%;
        margin: 0px;
       
    }
    #Wears-main-section-one {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: max-content;
        overflow: hidden;
        padding-bottom: 200px;

    
    }
    #outfits-sections {
        display: flex;
        overflow: visible;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 0px;
        width: 100%;
        height: max-content;      
    }
    .Wears-main-text-section {
        transform: rotate(0deg);
        position: absolute;
        top: 0;
        margin-left: 0px;
        left: 0;
        right: 0;
        z-index: 99;
        margin-top: -50px;
        padding: 0px;
        padding-bottom: 20px;
        
        margin-bottom: 20px;
        display: none;
    }
    .Wears-main-text-section p {
        opacity: .8;
        text-align: center;
        padding: 0px;
        font-size: 30px;
        width: max-content;
        font-family: "poppins", sans-serif;
        color: white;
        font-weight: 900;
        z-index: 99;
        letter-spacing: 0px;
        color: var(--main-color);
        text-align: center;
        margin-left: 120px;
        
    }
    .Wears-main-image-section img {

        width: 93%; /* Adjust wear image size here on hover */
        margin: 0px 0px 0px 20px;
        height: auto;
    
    
    }
    .Wears-main-image-section {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10; 
    }
    .Wears-main-image-section::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255, 0));
        z-index: 20;
    } 
    #outfits-sections:hover img {
        width: 95%; /* Adjust wear image size here on hover */
        margin-left: 0px;
        margin-top: 0px;
    }
    #outfits-sections:hover .Wears-main-text-section p {
        transform: translateX(0px);
    }
    /* #outfits-sections:hover.Wears-main-image-section::before {
        background-color: transparent;
    } */
    .Wears-main-image-section:hover::before {
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
        display: none;
    }
    #Single-wears {
        height: auto;
         width: 100%;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
         flex-direction: row;
         margin: -130px 0px 50px 0px ;

     }
     #Single-wears img {
         width: 93%;
         height: auto;
         aspect-ratio: 1/3;
     }
    
    #Wears-main-section-two, 
    #Wears-main-section-three{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height: max-content;
        margin-top: 0px;
    
    }
    
    
    #group-image-wears{
        width: max-content;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    
    }
    #group-image-wears::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 50;
        background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255, 0));
        z-index: 20;
        transition: all ease .5s ;
    
    }
    #group-image-wears:hover::before {
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    
    }
    .class-two-wear-image {
        width: 93%; /* Adjust group image size here */
        height: auto;
    }
    

}